import { http } from "../../utils"
import { Button, Table, Popconfirm, Modal, Space } from 'antd'
import React, { useEffect, useState } from 'react'
import '../test/testAll.scss'

const onChange = (pagination, filters, sorter, extra) => {
  console.log('params', pagination, filters, sorter, extra)
}
//
function TestAll () {

  const [open, setOpen] = useState(false)
  const [testDatil, setTestDatil] = useState(
    {
      "id": 23,
      "name": "第一份看起来像样子的试卷",
      "description": "这是关于《第一份看起来像样子的试卷》的描述",
      "status": 1,
      "subject_name": "小学数学",
      "total_score": 130,
      "test_time": 120,
      "start_time": "2022-09-04 09:25:46",
      "end_time": "2022-09-04 09:25:47",
      "judge_question_list": [{
        "answer": true,
        "description": null,
        "score": 5,
        "question_number": 1,
        "question_stem": "1+1=2"
      }, {
        "answer": false,
        "description": "1+2=3啊混蛋",
        "score": 5,
        "question_number": 2,
        "question_stem": "1+2=2"
      }],
      "gap_filling_question_list": [{
        "description": "2+2不等于4还能等于什么呢",
        "answer": ["4"],
        "score": 5,
        "question_number": 1,
        "question_stem": "2+2=_"
      }, {
        "description": "没错是爷爷",
        "answer": ["爷爷"],
        "score": 5,
        "question_number": 2,
        "question_stem": "爸爸的爸爸叫__"
      }],
      "single_select_question_list": [{
        "description": null,
        "item": ["A.纯路人", "B.小黑子", "C.ikun"],
        "answer": [0],
        "score": 10,
        "question_number": 1,
        "question_stem": "坤坤的真粉丝一般自称什么"
      }, {
        "description": null,
        "item": ["A.英文单词Control的缩写", "B.windows电脑键盘上的按键", "C.唱跳rap篮球"],
        "answer": [2],
        "score": 10,
        "question_number": 2,
        "question_stem": "请解释Ctrl的含义"
      }, {
        "description": null,
        "item": ["A.速度删除", "B.外国友人的名字", "C.大妈"],
        "answer": [0],
        "score": 10,
        "question_number": 3,
        "question_stem": "苏珊指的是什么"
      }, {
        "description": null,
        "item": ["A.绿色的尸体会散发出冷气", "B.绿色的僵尸害怕寒冷", "C.律师函"],
        "answer": [2],
        "score": 10,
        "question_number": 4,
        "question_stem": "绿尸寒指的是什么"
      }, {
        "description": null,
        "item": ["A.1,1", "B.2,2", "C.3,3", "D.1.5,0.5"],
        "answer": [0, 3],
        "score": 10,
        "question_number": 5,
        "question_stem": "_+_=2"
      }, {
        "description": null,
        "item": ["A.你", "B.我", "C.她", "D.他"],
        "answer": [2, 3],
        "score": 10,
        "question_number": 6,
        "question_stem": "你是谁"
      }],
      "multipart_select_question_list": [],
      "short_answer_question_list": [{
        "description": null,
        "answer": "答案就是,我也不懂为什么1+1会得出2",
        "score": 50,
        "question_number": 1,
        "question_stem": "请简述1+1=2的原因"
      }]
    }
  )
  //
  const columns = [
    {
      title: '试卷编号',
      dataIndex: 'id',
    },
    {
      title: '试卷名',
      dataIndex: 'name',
    },
    {
      title: '试卷说明',
      dataIndex: 'description',
      // sorter: (a, b) => a.age - b.age,
    }, {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '考试总分',
      dataIndex: 'total_score',
    },
    {
      title: '考试时长(分钟)',
      dataIndex: 'test_time',
    },
    {
      title: '开始时间',
      dataIndex: 'start_time',
    },
    {
      title: '结束时间',
      dataIndex: 'end_time',
    }, {
      title: '操作',
      dataIndex: 'operation',
      render: (_, record) =>
        testList.length >= 1 ? (
          <div>
            <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.key)}>
              <Button>删除</Button>
            </Popconfirm>
            <Button onClick={() => {
              setOpen(true)
              setTestDatil(record)
            }}>
              查看
            </Button>
            <Modal
              title="试卷详情"
              centered={true}
              open={open}
              onOk={() => setOpen(false)}
              onCancel={() => setOpen(false)}
              width={1000}
              destroyOnClose={true}

            >
              <Space direction="vertical" size={0}  >
                <p >判断题--------------------------------------------------------------------------------------------------------------------------------</p>
                {
                  testDatil.judge_question_list.map((item, index) => {
                    return (
                      <Space direction="vertical" size={0} key={`'判断题'${index}`} >
                        <Space>
                          <p >第{item.question_number}题:</p>
                          <p >{item.question_stem}</p>
                          <p >分值:({item.score})</p>
                        </Space>

                        <p > 答案:{item.answer === true ? '正确' : '错误'}</p>
                        <p >  题目解析:{item.description}</p>
                      </Space>
                    )

                  })
                }
                <p>填空题-------------------------------------------------------------------------------------------------------------------------------</p>
                {
                  testDatil.gap_filling_question_list.map((item, index) => {
                    return (
                      <Space direction="vertical" size={0} key={`'填空题'${index}`}  >
                        <Space>
                          <p>第{item.question_number}题:</p>
                          <p >{item.question_stem}</p>
                          <p >分值:({item.score})</p>
                        </Space>

                        <p >  答案:{item.answer}</p>
                        <p >  题目解析:{item.description}</p>
                      </Space>
                    )

                  })
                }
                <p>单选题-------------------------------------------------------------------------------------------------------------------------------</p>
                {
                  testDatil.single_select_question_list.map((item, index) => {
                    return (
                      <Space direction="vertical" key={`'单选题'${index}`}>
                        <Space>
                          <p>第{item.question_number}题:</p>
                          <p >{item.question_stem}</p>
                          <p >分值:({item.score})</p>
                        </Space>

                        {item.item.map((select, index) => {
                          return (
                            <Space direction="vertical" key={index}>
                              <p >{select}</p>
                            </Space>
                          )
                        })}


                        <p >  答案:{item.answer.includes(0) ? 'A' : ''}
                          {item.answer.includes(1) ? 'B' : ''}
                          {item.answer.includes(2) ? 'C' : ''}
                          {item.answer.includes(3) ? 'D' : ''}</p>
                        <p >  题目解析:{item.description}</p>

                      </Space>
                    )

                  })
                }
                <p>多选题-------------------------------------------------------------------------------------------------------------------------------</p>
                {
                  testDatil.multipart_select_question_list.map((item, index) => {
                    return (
                      <Space direction="vertical" key={`'多选题'${index}`}>
                        <Space>
                          <p>第{item.question_number}题:</p>
                          <p >{item.question_stem}</p>
                          <p >分值:({item.score})</p>
                        </Space>

                        {item.item.map((select, index) => {
                          return (
                            <Space direction="vertical" key={index}>
                              <p >{select}</p>
                            </Space>
                          )
                        })}
                        <p >  答案:{item.answer.includes(0) ? 'A' : ''}
                          {item.answer.includes(1) ? 'B' : ''}
                          {item.answer.includes(2) ? 'C' : ''}
                          {item.answer.includes(3) ? 'D' : ''}</p>
                        <p >  题目解析:{item.description}</p>

                      </Space>
                    )

                  })
                }
                <p>简答题-------------------------------------------------------------------------------------------------------------------------------</p>
                {
                  testDatil.short_answer_question_list.map((item, index) => {
                    return (
                      <Space direction="vertical" size={0} key={`'简答题'${index}`}  >
                        <Space>
                          <p>第{item.question_number}题:</p>
                          <p >{item.question_stem}</p>
                          <p >分值:({item.score})</p>
                        </Space>

                        <p >  答案:{item.answer}</p>
                        <p >  题目解析:{item.description}</p>
                      </Space>
                    )

                  })
                }

              </Space>
            </Modal>

          </div>
        ) : null,
    },
  ]

  const handleDelete = (key) => {
    const newData = testList.filter((item) => item.key !== key)
    setTestList(newData)
  }
  const [testList, setTestList] = useState([
    //   {
    //   "id": 23,
    //   "name": "第一份看起来像样子的试卷",
    //   "description": "这是关于《第一份看起来像样子的试卷》的描述",
    //   "status": 1,
    //   "subject_name": "小学数学",
    //   "total_score": 130,
    //   "test_time": 120,
    //   "start_time": "2022-09-04 09:25:46",
    //   "end_time": "2022-09-04 09:25:47",
    //   "judge_question_list": [{
    //     "answer": true,
    //     "description": null,
    //     "score": 5,
    //     "question_number": 1,
    //     "question_stem": "1+1=2"
    //   }, {
    //     "answer": false,
    //     "description": "1+2=3啊混蛋",
    //     "score": 5,
    //     "question_number": 2,
    //     "question_stem": "1+2=2"
    //   }],
    //   "gap_filling_question_list": [{
    //     "description": "2+2不等于4还能等于什么呢",
    //     "answer": ["4"],
    //     "score": 5,
    //     "question_number": 1,
    //     "question_stem": "2+2=_"
    //   }, {
    //     "description": "没错是爷爷",
    //     "answer": ["爷爷"],
    //     "score": 5,
    //     "question_number": 2,
    //     "question_stem": "爸爸的爸爸叫__"
    //   }],
    //   "single_select_question_list": [{
    //     "description": null,
    //     "item": ["A.纯路人", "B.小黑子", "C.ikun"],
    //     "answer": [0],
    //     "score": 10,
    //     "question_number": 1,
    //     "question_stem": "坤坤的真粉丝一般自称什么"
    //   }, {
    //     "description": null,
    //     "item": ["A.英文单词Control的缩写", "B.windows电脑键盘上的按键", "C.唱跳rap篮球"],
    //     "answer": [2],
    //     "score": 10,
    //     "question_number": 2,
    //     "question_stem": "请解释Ctrl的含义"
    //   }, {
    //     "description": null,
    //     "item": ["A.速度删除", "B.外国友人的名字", "C.大妈"],
    //     "answer": [0],
    //     "score": 10,
    //     "question_number": 3,
    //     "question_stem": "苏珊指的是什么"
    //   }, {
    //     "description": null,
    //     "item": ["A.绿色的尸体会散发出冷气", "B.绿色的僵尸害怕寒冷", "C.律师函"],
    //     "answer": [2],
    //     "score": 10,
    //     "question_number": 4,
    //     "question_stem": "绿尸寒指的是什么"
    //   }, {
    //     "description": null,
    //     "item": ["A.1,1", "B.2,2", "C.3,3", "D.1.5,0.5"],
    //     "answer": [0, 3],
    //     "score": 10,
    //     "question_number": 5,
    //     "question_stem": "_+_=2"
    //   }, {
    //     "description": null,
    //     "item": ["A.你", "B.我", "C.她", "D.他"],
    //     "answer": [2, 3],
    //     "score": 10,
    //     "question_number": 6,
    //     "question_stem": "你是谁"
    //   }],
    //   "multipart_select_question_list": [],
    //   "short_answer_question_list": [{
    //     "description": null,
    //     "answer": "答案就是,我也不懂为什么1+1会得出2",
    //     "score": 50,
    //     "question_number": 1,
    //     "question_stem": "请简述1+1=2的原因"
    //   }]
    // }
  ])


  const loadTest = async () => {
    const res = await http.get('/base_server/api/v1/pub/paper/test/detail/find_by_page')
    setTestList(res.data.records)
    // console.log(res)
  }
  useEffect(() => {
    loadTest()
  }, [])// eslint-disable-line

  //
  return (
    <div className="tastAll-sty">
      <Table columns={columns}
        dataSource={testList}
        onChange={onChange}
        scroll={{
          x: 1300,
        }}
        rowKey={(testList) => testList.id} />
    </div>
  )
};
export default TestAll